<template>
  <div>
    <h3>留言列表</h3>

    <el-table
    ref="multipleTable"
    :data="messageData"
    tooltip-effect="dark"
    style="width: 100%; margin-top:10px;"
    @selection-change="handleSelectionChange">

    <el-table-column
    label="姓名"
    width="80">
    <template slot-scope="scope">{{ scope.row.nickname }}</template>
  </el-table-column>
  <el-table-column
    label="邮箱"
    width="190">
    <template slot-scope="scope">{{ scope.row.email }}</template>
  </el-table-column>
    <el-table-column
      label="留言日期"
      width="180">
      <template slot-scope="scope">{{ $fromatDate(scope.row.created_at)  }}</template>
    </el-table-column>

    <el-table-column

      label="留言内容"
      show-overflow-tooltip>
      <template slot-scope="scope">{{ scope.row.content }}</template>
    </el-table-column>
    <el-table-column
    label="回复内容"
    show-overflow-tooltip>
    <template slot-scope="scope">
      <div v-for="reply in scope.row.replies" :key="reply.id" style="white-space: pre-wrap">
        {{ reply.content }}
      </div>
    </template>
  </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="updateCateBtnFn(scope.row)">回复</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="delUserMessage(scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-dialog
  title="提示"
  :visible.sync="isReply"
  width="50%"

  >
<adminReply  :userID="replyID" :key="replyID" @updateReply="updateReply"/>
  <span slot="footer" class="dialog-footer">
    <el-button @click="isReply = false">取 消</el-button>
    <el-button type="primary" @click="updateContent">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import adminReply from './adminReply/adminReply.vue'
import { getMessage, updateAdminReply, delUserMessageAPI } from '@/api/message'
//
export default {
  name: 'HotelSystemAdminIndex',
  components: {
    adminReply
  },
  data () {
    return {
      searchText: '',
      messageData: [],
      adminReply: [],
      isReply: false,
      multipleSelection: [],
      replyID: null, // 要回复的id
      replyContent: '' // 要回复的内容
    }
  },

  mounted () {
    this.initMessage()
  },

  methods: {
    // 回复事件
    async updateCateBtnFn (row) {
      this.replyID = row.id
      this.isReply = true
    },
    // 表格全选反选
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 初始化表格数据
    async initMessage () {
      const { data: res1 } = await getMessage()
      // const { data: res2 } = await getAdminReply()
      this.messageData = res1.data
    },
    // 弹窗的关闭的事件
    // clearID () {
    //   this.isReply = false
    //   this.replyID = -1
    // }
    updateReply (val) {
      this.replyContent = val
    },
    // 点击确定更新回复
    async updateContent () {
      const id = this.replyID
      const content = this.replyContent
      const { data: res } = await updateAdminReply(id, content)
      if (res.code === 200) {
        this.$message.success(res.msg)
        this.isReply = false
        // 数据修改完毕，关闭弹窗，重新获取数据
        this.initMessage()
      } else {
        this.$message.error(res.msg)
      }
    },
    // 删除用户回复
    async delUserMessage (row) {
      const { data: res } = await delUserMessageAPI(row.id)
      console.log(res)
      if (res.code === 200) {
        this.$message.success(res.msg)
        this.initMessage()
      }
    }
  },
  watch: {
    replyID: {
      handler (newval) {
        // console.log('只发生变化', newval)
        this.replyID = newval
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search-input {
  width: 300px;
  height: 30px;
  text-align: center;

}
.search-button {
  height: 40px;
  margin-left: 10px;
}
</style>
